<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css盒子模型</title>
</head>
<body>
<div class="border-shadow">阴影边框</div>
<div class="border-rounded">圆角边框</div>
<div class="border-gradient">渐变边框</div>
<div class="border-animated">动画边框</div>
<div class="border-dashed">虚线边框</div>
<div class="border-double">双层边框</div>
<div class="border-inset-shadow">阴影边框效果</div>

</body>
<style type="text/css">
    .border-shadow {
        border: 2px solid #d91b1b;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }
    .border-rounded {
        border: 3px solid #333;
        border-radius: 15px; /* 圆角的半径 */
    }
    .border-gradient {
        position: relative;
        border: solid 3px transparent;
        background-image: linear-gradient(white, white), radial-gradient(circle at top left, #FF8C00, #FF0080);
        background-origin: border-box;
        background-clip: content-box, border-box;
    }
    .border-animated {
        border: 4px solid #333;
        animation: border-animation 2s infinite;
    }

    @keyframes border-animation {
        0% { border-color: blue; }
        50% { border-color: green; }
        100% { border-color: blue; }
    }
    .border-dashed {
        border: 3px dashed #333;
    }
    .border-double {
        border: 5px double #333;
    }
    .border-inset-shadow {
        border: 1px solid #666;
        box-shadow: inset 0 0 10px #000000;
    }


</style>
</html>
